import type { PaginationProps } from 'naive-ui'
import { h, type Reactive } from 'vue'

/**
 * 分页 Hook 参数
 */
interface Options {
  defaultPageSize: number
}

/**
 * 分页 Hook
 * @param options 默认分页大小
 * @param callbackOnPageChange 分页回调
 * @param callbackOnSizeChange 分页大小回调
 */
export default function usePagination(
  options: Options = { defaultPageSize: 20 },
  callbackOnPageChange?: (page: number) => void,
  callbackOnSizeChange?: (pageSize: number) => void,
): Reactive<PaginationProps> {
  return reactive<PaginationProps>({
    page: 1,
    pageSize: options.defaultPageSize,
    showSizePicker: true,
    pageSizes: [5, 10, 20, 50],
    prefix: info => h('div', null, `共 ${info.itemCount} 条`),
    onUpdatePage: page => {
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      callbackOnPageChange && callbackOnPageChange(page)
    },
    onUpdatePageSize: pageSize => {
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      callbackOnSizeChange && callbackOnSizeChange(pageSize)
    },
  })
}
